<template>
	<view class="content">
		<!-- <projectSelect :showIcon="false"></projectSelect> -->
		<view class="section-1">
			<view class="section-body">
				<view style="width: 100%;height: 40rpx;" v-if="!projectType"></view>
				<reportCharts v-if="projectType" :info="analysis" :projectType='projectType'></reportCharts>
				<view class="tab-container" v-if="projectType != '1' && false">
					<view class="tab">
						<view @click="setCurIdx(idx, item.type)"
							:class="`item ${curIdx === idx ? 'item__active' : ''} ${curIdx + 1 === idx ? 'item__active_next' : ''}`"
							v-for="(item, idx) in tabList" :key="item.type">
							<view class="label">
								{{item.name}}
							</view>
							<view class="shape">
								<view class="shape-body"></view>
							</view>
							<view class="shape shape-mirrow">
								<view class="shape-body"></view>
							</view>
						</view>
					</view>
					<view class="wrapper wrapper-title" v-for="(item, idx) in 3" v-if="idx === curIdx">
						<view class="value l-value">
							<view class="time-line">
								<view class="item" v-for="item in 12">
									{{item}}月
								</view>
							</view>
							<view class="time-bar">
								<view class="left">计划时间</view>
								<view class="right" :style="{width: `${(idx + 1) * 100}rpx`}">
									<view class="slider"></view>
									<view class="slider" style="float: right;"></view>
								</view>
							</view>
							<view class="time-bar">
								<view class="left">实际时间</view>
								<view class="right small-right" :style="{width: `${(idx + 1) * 100 + 90}rpx`}">
									<view class="slider"></view>
									<view class="slider" style="float: right;">2.10</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 	<view v-if="projectType != '1'" class="custom-button" @click="go('/pages/work/manager/work_manage/progress/road/index')">提交进度上报</view>
		<view v-if="projectType == '1'" class="custom-button-wrapper">
			<view class="custom-button" @click="go('/pages/work/manager/work_manage/progress/info/index?type=tj')">土建进度上报</view>
			<view class="custom-button" @click="go('/pages/work/manager/work_manage/progress/info/index?type=dq')">电气进度上报</view>
		</view> -->
	</view>
</template>

<script>
	// import projectSelect from '@/components/project_select/index.vue';
	// import banner from '@/components/banner/index.vue';
	import {
		mapGetters
	} from 'vuex';
	import {
		reportAddApi,
		reportAnalysisApi,
		reportApi
	} from '@/api/report.js'
	import reportCharts from '@/components/report_chart/index.vue';
	export default {
		components: {
			reportCharts,
			// banner
		},
		props: {
			analysisProps: {
				type: Object,
				default () {
					return {};
				}
			},
			projectType: {
				type: [Number, String],
				default: 0
			},
			// projectId: {
			// 	type: [Number, String],
			// 	default: 0
			// },
			projectId: {
				type:[Boolean,String] ,
				default: false
			},
		},
		watch: {
			analysisProps: {
				handler(nv) {
					this.analysis = JSON.parse(JSON.stringify(nv));
				},
				deep: true
			},
		},
		data() {
			return {
				fileList: [],
				list: [{
						id: 1,
						name: '基础',
						ing: 0,
						done: 0,
						total: 1
					},
					{
						id: 2,
						name: '立塔',
						ing: 0,
						done: 0,
						total: 1
					},
					{
						id: 3,
						name: '架线',
						ing: 0,
						done: 0,
						total: 1
					},
				],
				tabList: [{
						type: 'base',
						name: '基础'
					},
					{
						type: 'tower',
						name: '立塔'
					},
					{
						type: 'line',
						name: '架线'
					},
				],
				curIdx: 0,
				curType: 'base',
				analysis: {},
			}
		},
		computed: {
			...mapGetters({
				curProject: 'system/getCurProject'
			})
		},
		methods: {
			go(url) {
				uni.navigateTo({
					url
				})
			},
			async getReport() {
				uni.showLoading({
					title: '加载中...'
				});
				const {
					data
				} = await reportApi({
					project_id: this.project_id ? this.project_id : this.curProject.id,
				});
				uni.hideLoading();
				if (data.code === 1) {
					this.analysis = data.data;
				}
			},
			setCurIdx(idx, type) {
				this.curIdx = idx;
				this.curType = type;
			},
		},
		mounted() {
			// 1:变电站 2:线路 3：输变电
			this.startStamp = (new Date()).valueOf();
			this.endStamp = (new Date()).valueOf();
			this.analysis = JSON.parse(JSON.stringify(this.analysisProps));
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ {
		.u-swiper {
			border-radius: 0 !important;
		}

		.u-swiper__wrapper__item__wrapper__image {
			border-radius: 0 !important;
		}
	}

	.tab-container {
		box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
		border-radius: 50rpx;
		overflow: hidden;
	}

	.custom-button-wrapper {
		width: 100%;
		display: flex;
		justify-content: space-between;

		.custom-button {
			margin-top: 60rpx;
			margin-bottom: 85rpx;
			box-shadow: 0rpx 13rpx 35rpx 0rpx rgba(60, 90, 214, 0.42);
		}
	}

	.custom-button {
		box-shadow: 0rpx 13rpx 35rpx 0rpx rgba(60, 90, 214, 0.42);
	}

	.wrapper {
		width: 100%;
		background-size: cover;
		background-repeat: no-repeat;
		overflow: hidden;
		box-sizing: border-box;
		padding: 28rpx 40rpx;
		margin-bottom: 25rpx;
		border-bottom-right-radius: 0rpx;
		border-bottom-left-radius: 50rpx;

		.label {
			width: 135rpx;
			float: left;
			font-size: 26rpx;
			font-weight: bold;
			font-stretch: normal;
			height: 48rpx;
			line-height: 48rpx;
			letter-spacing: 0px;
			color: #46464a;
		}

		.title {
			width: 100%;
			height: 30rpx;
			line-height: 30rpx;
			border-bottom: solid 3rpx #f2f2f0;
			font-size: 26rpx;
			font-weight: bold;
			font-stretch: normal;
			letter-spacing: 0rpx;
			color: #46464a;
			padding-bottom: 28rpx;

			.iconfont {
				float: right;
				font-size: 30rpx;
				color: #46464a;
			}
		}

		.value {
			float: left;
			width: 445rpx;
			padding-top: 28rpx;

			.time-line {
				box-sizing: border-box;
				padding-left: 130rpx;
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-bottom: 10rpx;

				.item {
					font-size: 15rpx;
					color: #d8d8d5;
				}
			}

			.time-bar {
				width: 100%;
				@include clear();
				margin-bottom: 15rpx;

				.left {
					width: 120rpx;
					float: left;
					line-height: 30rpx;
					color: #3b3c40;
					font-size: 26rpx;
				}

				.right {
					width: calc(100% - 300rpx);
					float: right;
					border-radius: 15rpx;
					height: 14rpx;
					background-color: #d8d8d5;
					margin-top: 8rpx;
					margin-right: 100rpx;

					.slider {
						width: 85rpx;
						font-size: 20rpx;
						text-align: center;
						line-height: 26rpx;
						background-color: #3a5df5;
						border-radius: 15rpx;
						float: left;
						display: none;
					}
				}

				.small-right {
					width: calc(100% - 300rpx);
					background-color: #2d5dfe;
					margin-right: 50rpx;
				}
			}

			.audio {
				width: 50rpx;
				height: 50rpx;
				background-color: #ffffff;
				border-radius: 50%;
				box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
				overflow: hidden;

				.audio-center {
					margin-top: 13rpx;
					margin-left: 13rpx;
					border-radius: 50%;
					width: 24rpx;
					height: 24rpx;
					background-color: #ed451b;
				}
			}

			.upload-wrap {
				width: 100%;
				min-height: 48rpx;
				border-radius: 20rpx;
				border: solid 2rpx #0535d6;
				position: relative;

				.iconfont {
					position: absolute;
					right: 25rpx;
					line-height: 44rpx;
					color: #1534ce;
					font-size: 28rpx;
				}
			}

			.date {
				width: 100%;
				height: 48rpx;
				border-radius: 20rpx;
				border: solid 2rpx #0535d6;
				line-height: 48rpx;
				position: relative;
				font-size: 26rpx;
				color: rgba(0, 0, 0, 0.7);
				box-sizing: border-box;
				padding-left: 20rpx;
				text-align: center;
				color: #0535d6;

				.iconfont {
					position: absolute;
					right: 25rpx;
					top: 2rpx;
					font-size: 30rpx;
					color: #dad9df;
				}
			}

			.picker {
				width: 100%;
				height: 48rpx;
				border-radius: 20rpx;
				border: solid 2rpx #0535d6;
				line-height: 48rpx;

				text {
					font-size: 26rpx;
					letter-spacing: 0rpx;
					color: rgba(#46464a, 0.5);
					margin-left: 28rpx;
				}

				.iconfont {
					float: right;
					font-size: 32rpx;
				}
			}

			.input {
				padding-top: 18rpx;

				.input-body {
					box-sizing: border-box;
					width: 100%;
					height: 44rpx;
					padding: 0 !important;
					border: none;
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: rgba(0, 0, 0, 0.7);
				}

				.input-placeholder {
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: rgba(0, 0, 0, 0.5);
				}
			}

			.textarea {
				width: 100%;
				height: 300rpx;
				line-height: 30rpx;

				.textarea-body {
					box-sizing: border-box;
					width: 100%;
					height: 300rpx;
					border: none;
					padding: 18rpx 0rpx !important;
					font-weight: normal;
					font-stretch: normal;
					letter-spacing: 0rpx;

					/deep/ .u-textarea__field {
						height: auto !important;
						font-size: 25rpx;
					}
				}

				/deep/ .u-textarea--disabled {
					background-color: #fff;
				}

				.textarea-placeholder {
					font-size: 25rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 50rpx;
					letter-spacing: 3rpx;
					color: rgba(0, 0, 0, 0.5);
				}
			}
		}

		.l-value {
			width: 100%;
		}


	}

	.section-1 {
		width: 100%;
		background-color: #2e5efe;
		margin-bottom: 50rpx;

		.section-body {
			width: 100%;
			background-repeat: no-repeat;
			// border-top-left-radius: 50rpx;
			// border-top-right-radius: 50rpx;
			// overflow: hidden;
			box-sizing: border-box;
			background-color: #fff;
			padding: 0 40rpx;

			.charts {
				margin-bottom: 30rpx;
				width: 100%;
				padding-top: 30rpx;
				@include clear();

				.legend {
					width: 190rpx;
					float: right;

					.items {
						width: 100%;
						height: 40rpx;
						display: flex;
						line-height: 40rpx;
						justify-content: space-between;

					}

					.item {
						height: 40rpx;
						display: inline-block;

						.icon {
							display: inline-block;
							border-radius: 50%;
							width: 15rpx;
							height: 15rpx;
							background-color: #2d5dfe;
							margin-right: 7rpx;
						}

						text {
							font-size: 16rpx;
							font-weight: normal;
							font-stretch: normal;
							line-height: 35rpx;
							letter-spacing: 0rpx;
							color: #d8d8d5;
						}

					}

					.item__ing {
						.icon {
							background-color: #00cdb4;
						}

						text {
							margin-right: 0;
						}
					}

					.item__total {
						.icon {
							background-color: orange;
						}
					}

					.percent {
						width: 100%;
						box-sizing: border-box;

						.number {
							width: 100%;
							font-size: 16rpx;
							height: 20rpx;
							line-height: 20rpx;
							color: #3b3c40;
							display: flex;
							justify-content: space-between;
						}
					}
				}



			}

			.tab {
				height: 100rpx;
				background-color: #1534ce;
				width: 670rpx;
				border-top-right-radius: 50rpx;
				border-top-left-radius: 50rpx;
				overflow: hidden;

				.item {
					width: 33.33%;
					float: left;
					height: 100rpx;
					background-color: #1534ce;
					position: relative;

					.label {
						position: relative;
						z-index: 10;
						box-sizing: border-box;
						text-align: center;
						width: 100%;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #ffffff;
						line-height: 100rpx;
						vertical-align: middle;
						transition: 0.3s ease;
						opacity: 0.5;

						image {
							width: 50rpx;
							height: 50rpx;
							margin-right: 10rpx;
							position: relative;
							top: 15rpx;
							transition: 0.3s ease;
							filter: grayscale(100%);
						}
					}

					.count {
						position: relative;
						z-index: 10;
						box-sizing: border-box;
						padding-left: 10%;
						font-size: 58rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #ffdc00;
						font-weight: bold;

						text {
							font-family: SourceHanSansCN-Regular;
							font-size: 26rpx;
							font-weight: normal;
							letter-spacing: 0rpx;
							color: #ffffff;
						}
					}

					.shape {
						z-index: 1;
						width: 50rpx;
						height: 50rpx;
						position: absolute;
						bottom: 0;
						left: -50rpx;
						background: #000;
						display: none;
						background-color: #fff;
						overflow: hidden;

						.shape-body {
							width: 50rpx;
							height: 50rpx;
							background-color: #1534ce;
							border-bottom-right-radius: 50rpx;
						}
					}

					.shape-mirrow {
						z-index: 1;
						left: 0;
						display: none;

						.shape-body {
							border-bottom-right-radius: 0rpx;
							border-bottom-left-radius: 50rpx;
						}
					}

				}

				.item__active {
					border-top-left-radius: 50rpx;
					border-top-right-radius: 50rpx;
					background-color: #fff;

					.label {
						color: #3d5779;
						opacity: 1;

						image {
							filter: grayscale(0%);
						}
					}

					.shape {
						display: block;
					}

					.shape-mirrow {
						display: none;
					}
				}

				.item__active_next {
					border-bottom-right-radius: 50rpx;

					.shape {
						display: none;
					}

					.shape-mirrow {
						display: block;
					}
				}

			}

			.series {
				width: calc(100% - 200rpx);
				float: left;

				padding-top: 40rpx;

				.item {
					width: 100%;
					height: 20rpx;
					line-height: 20rpx;
					@include clear();

					.label {
						float: left;
						width: 100rpx;
						line-height: 20rpx;
						font-size: 16rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #3b3c40;
					}

					.bar {
						float: left;
						width: calc(100% - 100rpx);
						height: 14rpx;
						margin-top: 3rpx;
						background-color: #d8d8d5;
						border-radius: 7rpx;
						position: relative;
						overflow: hidden;

						.done {
							height: 100%;
							float: left;
							background-color: #2d5dfe;
						}

						.ing {
							height: 100%;
							float: left;
							background-color: #00cdb4;
						}
					}
				}
			}
		}
	}
</style>
